<template>
	<div class="ai_wrapper">
		<audio id="audio"></audio>
		<section v-if="flag" class="video_box">
			<div class="icon_box">
				<img width="400px" height="300" src="/static/image/QQ20250909-082158.png" />
				<video id="video" width="400" height="300"></video>
			</div>
			<el-divider></el-divider>
			<div class="message_box">
				<pre v-for="(item, index) in answer_records" :key="index" :class="item.role">
					{{item.message}}
				</pre>
			</div>
			<div class="speek">
				<el-button type="primary" size="large" @click="submit">
					{{speek ? '结束说话' : '开始说话'}}
				</el-button>
				<el-button class="ready" size="large" type="primary" @click="over">结束面试</el-button>
			</div>
		</section>
		<div v-else class="btns" >
			<el-button class="ready" size="large" circle type="primary" @click="ready">准备好了</el-button>
		</div>
	</div>
</template>

<script setup>
import { getFile } from '@/static/util'
import { ref, nextTick, reactive, onUnmounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { post } from '@/axios'
import { useAiSessionStore } from '@/stores'
import { dayjs } from 'element-plus'
const mediaRecorder = ref(null)
const audioChunks = ref([])
const aiSessionStore = useAiSessionStore()
const flag = ref(false)
const end = ref(() => {})
const speek = ref(false)
const answer_records = reactive([])
onUnmounted(() => {
	if (flag.value) {
		over()
	}
})
function over () {
	post('/ai/end', { sessionId: aiSessionStore.getSessionId() }, content => {
		flag.value = false
	})
}
function confirm () {
	if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia({
			video: true
		}).then(function (stream) {
			const mediaStreamTrack =  stream.getTracks()[0];
			const video = document.querySelector('#video')
			video.srcObject = stream;
			video.play();
			end.value = () => {
				mediaStreamTrack.stop()
				flag.value = false
			}
		}).catch(function (err) {
			console.log(err);
		})
	}
}
function ready () {
	aiSessionStore.setSessionId(dayjs().format('YYYYMMDDHHmmssSSS'))
	answer_records.push({
		role: 'user',
		message: '准备好了'
	})
	answer('准备好了', content => {
		flag.value = true
		nextTick(() => {
			confirm()
		})
	})
}
function answer (message, callback) {
	post('/ai/start', { message, sessionId: aiSessionStore.getSessionId() }, content => {
		answer_records.push({
			role: 'ai',
			message: content.message
		})
		const audio = document.querySelector('#audio')
		audio.src = getFile(content.path)
		audio.play()
		callback(content)
	})
}
function submit () {
	speek.value = !speek.value
	if (speek.value) {
		navigator.mediaDevices.getUserMedia({
			audio: true
		}).then(stream => {
			mediaRecorder.value = new MediaRecorder(stream)
			mediaRecorder.value.ondataavailable = event => {
				audioChunks.value = []
				if (event.data.size > 0) {
					audioChunks.value.push(event.data)
					post('/ai/send', { file: audioChunks.value, sessionId: aiSessionStore.getSessionId() }, content => {
						answer_records.push({
							role: 'user',
							message: content
						})
						answer(content, res => {})
					})
				}
			}
			mediaRecorder.value.start()
		}).catch(error => {
			console.dir('获取麦克风权限失败')
		})
	} else {
		mediaRecorder.value.stop()
	}
}
</script>

<style scoped lang="scss">
#video {
	background-image: url('../../../public/static/image/3ea6beec64369c2642b92c6726f1epng.png');
	background-repeat: no-repeat;
	background-size: 300px 300px;
	background-position: center center;
	margin: 0 auto;
}
.video_box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.icon_box {
		width: 100%;
		height: 300px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.message_box {
		width: 100%;
		flex: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column-reverse;
		padding: 1rem;
		.ai, .user {
			max-width: 50%;
			padding: 1rem;
			background-color: #e4fbff;
			white-space: pre-line;
			margin-top: 10px;
		}
		.ai {
			align-self: flex-start;
			text-align: left;
		}
		.user {
			align-self: flex-end;
			text-align: right;
		}
	}
	.speek {
		height: 60px;
	}
}
.ai_wrapper {
	height: 100%;
	width: 100%;
	min-width: 1000px;
	.btns {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.ready {
			width: 300px;
			height: 300px;
			font-size: 2rem;
		}
	}
}
</style>